<!-- 表格组件 -->
<template>
    <div>
        <el-table :data="data" stripe style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
            <!--选择-->
            <el-table-column v-if="hasSelection" type="selection" width="55" />
            <!--序号-->
            <el-table-column v-if="hasIndex" type="index" width="55" />
            <!--数据源-->
            <template v-for="(column, index) in columns">
                <!-- 表头存在type类型 -->
                <el-table-column v-if="
                    column.type &&
                    (column.type == 'selection' || column.type == 'index')
                " :type="column.type" />

                <!-- 表头是数据或操作内容 -->
                <el-table-column v-else :label="column.label">
                    <template v-if="!column.type" slot-scope="{ row, $index}">
                        <slot v-if="column.slot" :name="column.slot" :row="row" :index="$index" />
                        <span v-else>{{ row[column.prop] }}</span>
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>
<script>
export default {
    name: 'Table',
    props: {
        loading: {
            type: Boolean,
            default: () => false
        },
        // 是否可以选择
        hasSelection: {
            type: Boolean,
            default: () => false
        },
        // 是否有序列项
        hasIndex: {
            type: Boolean,
            default: () => false
        },
        // 这是相应的字段展示
        columns: {
            type: Array,
            default: () => []
        },
        // 这是数据源
        data: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        // 将选中的行发送到父组件
        handleSelectionChange(val) {
            const selectionArr = []
            val.forEach(item => {
                selectionArr.push(item)
            })
            this.$emit('commitSelection', selectionArr)
        },
    },
}
</script>